<template>
    <div>
        <Modal v-model="modalSs11004" :title="title" width="800" style="position:relative;" cancel-text="关闭">
            <Form :disabled=true ref="dataSs11004" :model="dataSs11004" :label-width="150" :rules="ruleSs11004">
                <Row>
                    <FormItem label="支出所属" prop="ssbb0001">
                        <c-dict-select v-model="dataSs11004.ssbb0001" dictCode="expensestype"
                                       placeholder="请选择支出类别" :width="400"
                                       dicType="service"
                                       dictService="/api/ac/subsistence/ss11002Service/getAssistanceMemberList"
                                       :serviceParam="serviceParam" class="itemStyle"/>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="支出类别" prop="ssbb0003">
                        <c-dict-select v-model="dataSs11004.ssbb0003" dictCode="expensestype" :width="400"
                                       placeholder="请选择支出类别"/>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="月支出金额" prop="ssbb0004">
                        <Input v-model="dataSs11004.ssbb0004" placeholder="请输入月支出金额" type="number"
                               style="width: 400px"></Input>
                    </FormItem>
                </Row>
                <!--                            <FormItem label="支出时间范围" prop="daterange">-->
                <!--                                <DatePicker type="daterange" v-model="dataSs11004.daterange" class="itemStyle"-->
                <!--                                            style="width: 200px"/>-->
                <!--                            </FormItem>-->

            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="modalSs11004 = false">关闭</Button>
            </div>
        </Modal>
        <div class="table_div">
            <vxe-table border
                       resizable
                       row-id="id"
                       :row-key="true"
                       show-overflow="tooltip"
                       highlight-hover-row
                       align="center"
                       header-align="center"
                       ref="xTree"
                       :loading="Loading"
                       :data="tableData">
                <vxe-table-column field="azcp0003" title="支出所属" align="center" min-width="200" fixed="left"/>
                <vxe-table-column field="ssbb0003_name" title="支出类别" align="center" min-width="160" fixed="left"/>
                <!--<vxe-table-column field="ssbb0005" title="支出开始时间" align="center" min-width="140"-->
                                  <!--:formatter="renderTime"/>-->
                <!--<vxe-table-column field="ssbb0007" title="支出结束时间" align="center" min-width="140"-->
                                  <!--:formatter="renderTime"/>-->
                <vxe-table-column field="ssbb0004" title="月支出金额" align="center" min-width="100"/>
                <vxe-table-column field="" title="操作" min-width="200" fixed="right">
                    <template v-slot="{ row }">
                        <Button type="success" size="small" style="margin-right: 5px" @click="handleDetail(row)">详情
                        </Button>
                    </template>
                </vxe-table-column>
            </vxe-table>
            <Page :total="dataCount" :page-size="pageSize" show-total class="paging"
                  @on-change="handleTableChange" :current="pageNo"></Page>
        </div>
    </div>
</template>
<script>
    import {CommonMixin} from '@/views/common/js/CommonMixin'

    export default {
        mixins: [CommonMixin],
        components: {},
        created() {
            let that = this;
            that.familyInfo = that.$parent.familyInfo;
            that.ss11001Id = that.$parent.familyInfo.ssca0001;
            that.queryParam.azcp0500 = that.ss11001Id;
            this.loadData();
            that.serviceParam.azcp0500 = that.ss11001Id;
        },
        data() {
            return {
                serviceParam: {
                    azcp0500: ''
                },
                ruleSs11004: {
                    ssbb0001: [
                        {required: true, message: '请选择支出所属', trigger: 'blur'}
                    ],
                    ssbb0003: [
                        {required: true, message: '请选择支出类别', trigger: 'blur'}
                    ],
                    ssbb0004: [
                        {required: true, message: '请输入月支出金额', trigger: 'blur'}
                    ],
                    // daterange: [
                    //     {required: true, message: '请选择支出时间范围', trigger: 'blur', pattern: /.+/}
                    // ],
                },
                queryParam: {},
                disableSubmit: false,
                modalSs11004: false,
                familyInfo: {},
                title: "",
                tableData: [],
                dataCount: 0,
                Loading: false,
                ss11001id: '',
                next_params: {},
                url: {
                    list: "/api/ac/subsistence/ss11004Service/getPageList"
                },
                dataSs11004: {},
            }
        },
        methods: {
            prevStep() {
                this.$parent.clickStep(2);
            },
            nextStep() {
                this.$parent.clickStep(4);
            },
            handleDetail(row) {
                let that = this;
                that.title = "详情";
                that.disableSubmit = true;
                let record = row;
                if (record.id) {
                    that.modalSs11004 = true;
                    that.dataSs11004 = Object.assign({}, record);
                    // that.dataSs11004.daterange = new Array();
                    // that.dataSs11004.daterange.push(new Date(record.ssbb0005));
                    // that.dataSs11004.daterange.push(new Date(record.ssbb0007));
                } else {
                    that.modalSs11004 = false
                }
            },
            reloadData() {
                let that = this;
                that.queryParam.ssbb0001 = that.ss11001id;
                that.loadData();
            },
            nextPage() {
                this.$router.push({
                    name: 'db_supportlist',
                    params: this.next_params
                })
            },
            next() {
                this.$router.push({
                    name: 'db_supportlist',
                    params: this.next_params
                })
            },
        },
        mounted() {
        },
    }
</script>
<style scoped>
    /deep/ .ivu-form-item-error-tip {
        display: none;
    }

    /*.ivu-form-item {*/
    /*    margin-bottom: 0px;*/
    /*}*/

    .itemStyle {
        width: 180px
    }

    .head-img1 {
        height: 200px;
        width: 250px;
        margin-top: 15px;
    }

    .head-img {
        height: 200px;
        width: 250px;
    }

    .imgBackColor {
        background-color: WhiteSmoke;
        height: 250px;
    }

    .positiveTDiv {
        height: 240px;
        width: 75px;
        line-height: 240px;
        background-color: #7CCD7C;
        margin-bottom: 10px;
        color: white;
        font-size: 14px;
        font-weight: 700;
    }
</style>
